<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">

      <div :class="'sub-navbar ' + postForm.status" >
        <template v-if="fetchSuccess">

          <router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create-form'}">
            <el-button type="info">发布新内容</el-button>
          </router-link>

          <el-dropdown trigger="click">
            <el-button plain>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu class="no-padding" slot="dropdown">
              <el-dropdown-item>
                <el-radio-group style="padding: 10px;" v-model="postForm.comment_disabled">
                  <el-radio :label="true">关闭评论</el-radio>
                  <el-radio :label="false">打开评论</el-radio>
                </el-radio-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!--<el-dropdown trigger="click">
            <el-button plain>平台
              <i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i>
            </el-button>
            <el-dropdown-menu class="no-border" slot="dropdown">
              <el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
                <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
                  {{item.name}}
                </el-checkbox>
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>-->

          <!--<el-dropdown trigger="click">
            <el-button plain>
              外链
              <i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i>
            </el-button>
            <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
              <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
                <el-input placeholder="请输入内容" v-model="postForm.source_uri">
                  <template slot="prepend">填写url</template>
                </el-input>
              </el-form-item>
            </el-dropdown-menu>
          </el-dropdown>-->

          <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">发布
          </el-button>
          <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>

        </template>
        <template v-else>
          <el-tag>发送异常错误,刷新页面,或者联系管理员</el-tag>
        </template>

      </div>

      <div class="createPost-main-container">
        <el-row>
          <el-col :span="16">
            <el-form-item style="margin-bottom: 40px;" prop="title">
              <MDinput name="name" v-model="postForm.title" required :maxlength="100">
                标题
              </MDinput>
              <span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
            </el-form-item>

            <div class="postInfo-container">
              <el-row>
                <el-col :span="12">
                  <!--<el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
                    <multiselect v-model="postForm.author" :options="userLIstOptions" @search-change="getRemoteUserList" placeholder="搜索用户" selectLabel="选择"
                      deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
                      <span slot='noResult'>无结果</span>
                    </multiselect>
                  </el-form-item>-->
                  <el-form-item label-width="80px" label="分类:" class="postInfo-container-item" prop="category">
                    <el-select v-model="postForm.category" placeholder="请选择" required>
                      <el-option-group v-for="group in categoryOptions"
                        :key="group.id" :label="group.name">
                        <el-option v-for="item in group.children"
                          :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="将替换作者" placement="top">
                    <el-form-item label-width="80px" label="来源:" class="postInfo-container-item">
                      <el-input placeholder="将替换作者" style='min-width:150px;' v-model="postForm.source_name">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>

                <el-col :span="12">
                  <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
                    <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-tooltip class="item" effect="dark" content="文章关键字" placement="top">
                    <el-form-item label-width="80px" label="关键字:" class="postInfo-container-item">
                      <el-input placeholder="关键字" style='min-width:150px;' v-model="postForm.keyword">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>

            <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
              <el-input type="textarea" class="article-textarea" :rows="2" autosize placeholder="请输入内容" v-model="postForm.abstract">
              </el-input>
              <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div style="margin: 50px 0 0 30px">
              <span>缩略图</span>
              <el-form-item prop="banner">
                <Upload v-model="postForm.banner"></Upload>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <div class="editor-container">
          <tinymce :height=400 ref="editor" v-model="postForm.content"></tinymce>
        </div>

      </div>
    </el-form>

  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import Upload from '@/components/Upload/singleImage'
  import MDinput from '@/components/MDinput'
  import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
  import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
  import Sticky from '@/components/Sticky' // 粘性header组件
  // import { validateURL } from '@/utils/validate'
  import { fetchArticle, saveArticle, updateArticle, options } from '@/api/article'
  import { userSearch } from '@/api/remoteSearch'

  const defaultForm = {
    id: undefined,
    status: 'draft',
    title: '', // 文章题目
    content: '', // 文章内容
    category: '',
    abstract: '', // 文章摘要
    // source_uri: '', // 文章外链
    // image_uri: '', // 文章图片
    source: '', // 文章外部作者
    display_time: undefined, // 前台展示时间
    banner: '',
    keyword: '',
    comment_disabled: false
  }

  export default {
    name: 'articleDetail',
    components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      const validateRequire = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: rule.field + '为必传项',
            type: 'error'
          })
          callback(new Error('请输入' + rule.field))
        } else {
          callback()
        }
      }
      return {
        postForm: Object.assign({}, defaultForm),
        fetchSuccess: true,
        loading: false,
        categoryOptions: [],
        platformsOptions: [
          { key: 'a-platform', name: 'a-platform' },
          { key: 'b-platform', name: 'b-platform' },
          { key: 'c-platform', name: 'c-platform' }
        ],
        rules: {
          banner: [{ validator: validateRequire, trigger: 'change' }],
          title: [{ validator: validateRequire, trigger: 'blur' }],
          content: [{ validator: validateRequire, trigger: 'blur' }],
          category: [{ validator: validateRequire, trigger: 'change' }]
          // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
        }
      }
    },
    computed: {
      contentShortLength() {
        return this.postForm.abstract.length
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        const $vm = this
        if (this.isEdit) {
          this.axios.all([options(), fetchArticle()]).then(this.axios.spread(function(categories, article) {
            $vm.categoryOptions = categories
            $vm.postForm = article
          }))
        } else {
          options().then(response => {
            this.categoryOptions = response
          })
          this.postForm = Object.assign({}, defaultForm)
        }
      },
      submitForm() {
        this.postForm.display_time = this.postForm.display_time ? parseInt(this.postForm.display_time / 1000) : 0
        // console.log(this.postForm)
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.loading = true
            const option = this.isEdit ? updateArticle : saveArticle
            option(this.postForm).then(response => {
              this.$notify({
                title: '成功',
                message: '发布文章成功',
                type: 'success',
                duration: 2000
              })
              this.postForm.status = 'published'
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      draftForm() {
        if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
          this.$message({
            message: '请填写必要的标题和内容',
            type: 'warning'
          })
          return
        }
        this.$message({
          message: '保存成功',
          type: 'success',
          showClose: true,
          duration: 1000
        })
        this.postForm.status = 'draft'
      },
      getRemoteUserList(query) {
        userSearch(query).then(response => {
          if (!response.data.items) return
          console.log(response)
          this.userLIstOptions = response.data.items.map(v => ({
            key: v.name
          }))
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
          text-align: right;
          margin-right: 10px;
          .editor-upload-btn {
            display: inline-block;
          }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>

